<template>
  <view>
    <view class="fixed bg-f8ff w-100 h-100 top0 left0 ov-hd-y">
      <itemTitle :item="details" type="integral">
        <template slot="item_title">
          <view class="font25 t-0">已售：{{ details.realSales || "0" }}</view>
        </template>
      </itemTitle>
      <view>
        <view class="w-100 px-2-6 py-2">
          <view class="w-100 h1 bg-ccc"></view>
        </view>
        <!-- <view class="px-5 f-b-c mb-4 mt-2">
					<view class="font25 t-8">
						选择 <text class="t-20 ml-4">规格/颜色</text>
					</view>
					<view>
						<image src="../../static/icon_right_0.png" class="w24 h24" />
					</view>
				</view> -->
        <view v-if="details.goodsType === 'MALL'">
          <view class="w-100 px-2 pt-3 pb-4 f-s-c">
            <text
              class="w138 h66 f-c-c t-0 circle20 font24"
              @click="change_send_type(2)"
              :class="send_type == 2 ? 'bg-theme' : 'bg-dd'"
              >邮寄</text
            >
            <text
              class="w138 h66 f-c-c t-0 bg-dd circle20 font24 ml-3"
              @click="change_send_type(1)"
              :class="send_type == 1 ? 'bg-theme' : 'bg-dd'"
              >自提</text
            >
          </view>
          <view v-if="send_type == 1" class="px-2-6 w-100">
            <view
              class="font25 font600 t-20 px-3 f-b-c py-3 w-100 bg-white show0 circle34"
            >
              找工作人员领取
            </view>
          </view>

          <view
            v-if="send_type == 2"
            class="px-5 f-b-c mb-2 mt-2"
            @click="open_change('popup_address')"
          >
            <view class="font25 t-8" v-if="address.province">
              送至
              <text class="t-20 ml-4"
                >{{ address.province }}{{ address.city }}{{ address.county
                }}{{ address.address }}</text
              >
            </view>
            <view class="font25 t-8" v-else> 请选择地址 </view>
            <view>
              <image src="../../static/icon_right_0.png" class="w24 h24" />
            </view>
          </view>
        </view>
        <!-- 	<view class="px-5 f-b-c mb-4" @click="open_change('popup_activity')">
					<view class="font25 t-8">
						活动 <text class="t-20 ml-4 px-3 py-1 circle12 border">满500减50</text>
					</view>
					<view>
						<image src="../../static/icon_right_0.png" class="w24 h24" />
					</view>
				</view> -->
        <view class="w-100 px-2-6 py-2" v-if="details.goodsType === 'MALL'">
          <view class="w-100 h1 bg-ccc"></view>
        </view>

        <view class="w-100 px-5">
          <view class="font28 font500 t-20 pb-2">商品详情</view>
          <richText :key="details.id" :rich_text="details.content"></richText>
        </view>
        <view
          v-if="details.stock"
          style="
            color: #8a8a8a;
            font-size: 22rpx;
            margin-bottom: 20rpx;
            padding-left: 50rpx;
          "
          >剩余库存：{{ details.remainStockNum }}</view
        >
      </view>
      <view class="w-100 h280"></view>
    </view>

    <!-- 底部 -->
    <view class="w-100 fixed bottom0 pb-5 pt-2 left0 z-999 bg-f8ff show0-top">
      <!-- 新增积分兑换数量 -->
      <view class="w-100 f-b-c" style="padding: 10rpx 50rpx">
        <view class="font28 font500 t-8" style="color: #333">兑换数量</view>
        <view class="f-b-c">
          <view class="w64 h64 f-c-c" @click="subtractNum()">
            <view
              class="w40 h40 font40 font600 rounded-circle f-c-c pb-1 t-20"
              :class="selectNum <= 1 ? 't-3' : 't-20 bg-theme'"
              >-</view
            >
          </view>
          <view class="px-2 h64 font28 font500 t-20 f-c-c">{{
            selectNum
          }}</view>
          <view class="w64 h64 f-c-c" @click="addNum()">
            <view
              class="w40 h40 font40 font600 rounded-circle t-20 f-c-c pb-1 bg-theme"
              >+</view
            >
          </view>
        </view>
      </view>
      <view class="w-100 px-4 pt-3">
        <view class="w-100 f-b-c bg-theme_3 h100 circle120 pl-5">
          <view class="pl-1 font28 font700 t-w">
            <text class="font24 font400 mr-05">合计</text
            >{{ getTotalIntegral }}积分
          </view>
          <view
            class="w220 h100 f-c-c bg-theme circle120 font28 font700 t-20"
            @click="get_purchass"
            >立即兑换</view
          >
        </view>
      </view>
    </view>

    <!-- 选择收货地址 开始 -->
    <uni-popup type="bottom" ref="popup_address" class="z-9999 re">
      <PopupHeader
        title="选择收货地址"
        @set_close="set_close"
        type="popup_address"
      >
        <template slot="popup_content">
          <view class="w-100 h16"></view>
          <view class="w-100 h408 re">
            <scroll-view
              class="scroll-view_H uni-scroll"
              scroll-y="true"
              scroll-with-animation
            >
              <view
                class="px-5 f-b-c py-3 border-bottom"
                v-for="(item, index) in address_list"
                :key="item.id"
                @click="change_address(item)"
              >
                <view class="fs-y-s pr-8">
                  <view class="f-b-c w-100 h50 pb-2">
                    <view
                      class="font32 font600"
                      :class="address.id == item.id ? 't-20' : 't-8'"
                      >{{ item.name }}</view
                    >
                    <view
                      class="font32 font600"
                      :class="address.id == item.id ? 't-20' : 't-8'"
                      >{{ item.mobile }}</view
                    >
                  </view>
                  <view
                    class="font25"
                    :class="address.id == item.id ? 't-20' : 't-8'"
                  >
                    {{ item.province }}
                    {{ item.city }}
                    {{ item.county }}
                    {{ item.address }}
                  </view>
                </view>
                <view>
                  <image
                    src="../../static/icon_select_cur.png"
                    v-if="address.id == item.id"
                    class="w40 h40"
                  />
                  <image
                    src="../../static/icon_select.png"
                    v-else
                    class="w40 h40"
                  />
                </view>
              </view>
              <view
                v-if="address_list.length == 0"
                class="w-100 py-6 font28 t-20 t-a"
                >暂无数据</view
              >
            </scroll-view>
          </view>
          <view class="w-100 h214 px-2-6 f-c-c">
            <view
              class="w-100 h100 f-c-c circle50 bg-theme font28 t-20 font700"
              @click="set_address"
              >添加收货地址</view
            >
          </view>
        </template>
      </PopupHeader>
    </uni-popup>
    <!-- 选择收货地址 END -->
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import itemTitle from "../ticket/components/title.vue";
import richText from "../ticket/components/rich-text.vue";
import ImageFile from "../../components/img_file.vue";
import PopupHeader from "../shop/components/popup-header.vue";

import {
  integralDetails,
  pointsMallExchange,
  get_member_info,
} from "../../api/user.js";
import { encryptedData } from "../../api/auth.js";
import { address_list } from "../../api/mall.js";

export default {
  components: {
    itemTitle,
    richText,
    PopupHeader,
    ImageFile,
  },
  data() {
    return {
      selectNum: 1,
      details: {},
      show_shop_car: false,
      address_list: [],
      address: {},
      userInfo: {},
      coupon_list: [],
      send_type: 1, //  // 寄送方式 1：自提/2：邮寄
    };
  },
  computed: {
    ...mapState("shop", ["shop_car", "shop_number"]),
    getTotalIntegral() {
      return this.details.integral * this.selectNum;
    },
  },

  created() {
    let details = uni.getStorageSync("shop_details");
    this.userInfo = uni.getStorageSync("userInfo") || {};
    this.get_mall_details(details.id);
  },
  onShow() {
    let details = uni.getStorageSync("shop_details");
    if (details.goodsType === "MALL") {
      this.get_address_list();
    }
  },
  mounted() {
    uni.$on("updateAdress", () => {
      this.get_address_list("update");
    });
  },
  onUnload() {
    uni.$off("updateAdress", () => {
      console.log("销毁监听");
    });
  },

  methods: {
    ...mapActions("shop", [
      "set_change_shop_shop_car",
      "set_clear_shop_shop_car",
    ]),
    async get_mall_details(id) {
      const { code, body, message } = await integralDetails({ id });
      if (code === "0") {
        this.details = body;
      } else {
        uni.showToast({
          title: message,
          icon: "error",
        });
      }
    },
    change_send_type(val) {
      this.send_type = val;
    },
    set_reduce(obj) {
      let data = {
        id: obj.id,
      };
      // 新增才有 obj 参数 购物车中数量少于1 做删除
      data.type = obj.number <= 1 ? "delete" : "reduce";

      this.set_change_shop_shop_car(data);
    },
    set_add(obj) {
      let data = {
        obj,
        id: obj.id,
        number: 1,
        type: "plus",
      };
      this.set_change_shop_shop_car(data);
    },
    // 清空购物车
    clear_car() {
      this.$refs.alertDialog.open();
    },
    dialogConfirm() {
      this.set_clear_shop_shop_car();
    },
    dialogClose() {
      this.$refs.alertDialog.close();
    },
    // 购买
    async get_purchass() {
      if (!this.$validateStock(this.details, this.selectNum)) {
        return uni.showToast({
          title: "库存不足，请重新选择",
          icon: "none",
        });
      }
      if (!this.address.province && this.send_type == 2) {
        return uni.showToast({
          title: "请选择邮寄地址",
          icon: "none",
        });
      }
      let data = {
        sendType: this.send_type,
        addressId: this.address.id,
        number: this.selectNum,
        integral: this.details.integral * this.selectNum,
        pointsMallId: this.details.id,
      };
      const { body, code, message } = await pointsMallExchange(data);
      if (code === "0") {
        let details = uni.getStorageSync("shop_details");
        this.get_mall_details(details.id);

        this.get_member();
      } else {
        uni.showToast({
          title: message,
          icon: "error",
          duration: 1500,
        });
      }
    },
    async get_member() {
      encryptedData({})
        .then((res) => {
          if (res.code == 0) {
            // uni.setStorageSync('token',res.body.token) //存token
            // 是否 已注册
            // uni.setStorageSync('is_user',!!res.body.memberVO)
            if (!!res.body.memberVO) {
              let userInfo = { ...res.body.memberVO, token: res.body.token };
              // 先存用户信息
              uni.setStorageSync("userInfo", userInfo);
              // this.userInfo = userInfo
              // 在设置是否登录 是否登录需要判断是否有用户信息
              // this.set_change_is_login(true)
            }
            uni.showToast({
              title: "兑换成功",
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/integral/exchange",
              });
            }, 1500);
          }
        })
        .catch((e) => {
          console.error(e);
        })
        .finally(() => {
          // uni.hideLoading()
        });
    },
    // 添加地址
    set_address() {
      uni.navigateTo({
        url: "/pages/shop/address",
      });
      this.$refs["popup_address"].close();
    },
    // 选择地址
    change_address(val) {
      this.address = val;
      this.set_close("popup_address");
    },
    // 开启弹窗
    open_change(val) {
      this.$refs[val].open();
      if (val === "popup_address") {
        this.get_address_list();
      }
    },
    // 关闭弹出
    set_close(val) {
      this.$refs[val].close();
    },
    car_info() {
      this.show_shop_car = !this.show_shop_car;
      if (this.show_shop_car) {
        return this.$refs.shop_car.open();
      }
      this.$refs.shop_car.close();
    },
    set_show_car(val) {
      this.show_shop_car = val.show;
    },
    // 收货地址
    async get_address_list(type) {
      let query = {
        currentPage: 1,
        pageSize: 30,
      };
      const { body } = await address_list(query);
      this.address_list = body?.records || [];
      let address = body?.records?.find((item) => item.def) || {};
      if (!this.address?.id || type === "update") {
        this.address = address;
      }
    },
    //减少
    subtractNum() {
      if (this.selectNum <= 1) return;
      this.selectNum--;
    },
    //增加
    addNum() {
      this.selectNum++;
    },
  },
};
</script>
<style lang="scss" scoped>
.show0-top {
  border-radius: 48rpx 48rpx 0 0;
}
.border {
  border: 1rpx solid #00cd32;
}
.ty-car {
  right: -14rpx;
}
.bg-1 {
  border-radius: 50rpx 0 0 50rpx;
}
.bg-2 {
  border-radius: 50rpx 0 16rpx 50rpx;
}
.bg-3 {
  border-radius: 0 50rpx 50rpx 0;
}
.bg-4 {
  border-radius: 16rpx 50rpx 50rpx 0;
}
.scroll-view_H {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
}
.ty-circle-box {
  border-radius: 0 34rpx 34rpx 0;
}
.show-in-top {
  // box-shadow: 1rpx 0px 1rpx rgba(0,102,29,0.15) inset;
  transform: rotate(90deg);
  border-radius: 50% 0 0 50%;
}
.show-in-bottom {
  // box-shadow: 1rpx 0px 1rpx rgba(0,102,29,0.15) inset;
  transform: rotate(-90deg);
  border-radius: 50% 0 0 50%;
}
.ty-car {
  right: -24rpx;
}
.scroll-view_H_car {
  position: absolute;
  top: 20rpx;
  left: 0;
  bottom: 170rpx;
  right: 0;
  z-index: 9;
}
.rounded-top-left-54 {
  border-radius: 54rpx 54rpx 0 0;
}
.h824 {
  height: 824rpx;
}
</style>
